class Enlarge
{
    constructor(el,options={})
    {
        // 1. 保存全局信息
        this.el = document.querySelector(el)
        this.maskObj=this.el.querySelector('.mask')
        this.enlargeObj=this.el.querySelector('.enlarge')
        this.imgObj=this.el.querySelector('.img')
        this.options=options
        // 2. 默认调用
        this.init()
    }
    
    init() {
        // 功能1
        // 功能2
        // 功能3
        // ....
        // 功能n
        this.overOut()
        this.enlargeSetWH()
        this.maskMove()
        this.enlargeSetBg()
        this.smallImgChange()
        //定制属性
        this.opzdy()
    }
    opzdy(){
        this.maskObj.style.background=this.options.maskBg
        this.maskObj.style.borderRadius=this.options.maskXz
        this.enlargeObj.style.borderRadius=this.options.maskXz
    }
    //移入移出
    overOut(){
        this.imgObj.onmouseover=()=>{
            this.maskObj.style.display= this.enlargeObj.style.display='block'
        }
        this.imgObj.onmouseout=()=>{
            this.maskObj.style.display= this.enlargeObj.style.display='none'
        }
    }
    maskMove(){
        this.imgObj.onmousemove=(evt)=>{
            let e= evt|| window.event
            let left=e.pageX- this.imgObj.parentNode.offsetLeft-this.maskObj.offsetWidth/2
            let top=e.pageY- this.imgObj.parentNode.offsetTop-this.maskObj.offsetHeight/2
            if(left<0) left=0
            if(top<0) top=0
            let lmax=this.imgObj.offsetWidth-this.maskObj.offsetWidth
            let tmax=this.imgObj.offsetHeight-this.maskObj.offsetHeight
             
            if(left>lmax) left=lmax
            if(top>tmax) top=tmax
            this.maskObj.style.left=left+'px'
            this.maskObj.style.top=top+'px'

            this.enlargeSetBg(left,top)
        }
    }
    getStyle(tagObj, attrName) 
    {
        if(window.getComputedStyle)
        {
            return window.getComputedStyle(tagObj)[attrName]
        }else{
            return tagObj.current[attrName]
        }
    }
    
    enlargeSetWH()
    {
            // div.enlarge w = div.mask w * (div.enlarge background / div.img background )
            // div.enlarge h = div.mask h * (div.enlarge background / div.img background )
        let maskW=parseFloat(this.getStyle(this.maskObj,'width'))
        let maskH=parseFloat(this.getStyle(this.maskObj,'height'))
        let enlargeBg=this.getStyle(this.enlargeObj,'background-size')
        
        let enlargeBgW=parseFloat(enlargeBg.split(' ')[0])
        let enlargeBgH=parseFloat(enlargeBg.split(' ')[1])

        let imgW=parseFloat(this.getStyle(this.imgObj,'width'))
        let imgH=parseFloat(this.getStyle(this.imgObj,'height'))

        this.enlargeObj.style.width=maskW*(enlargeBgW/imgW)+'px'
        this.enlargeObj.style.height=maskH*(enlargeBgH/imgH)+'px'
    }
    
    enlargeSetBg(left,top){
        let enlargeBg=this.getStyle(this.enlargeObj,'background-size')
        let enlargeBgW=parseFloat(enlargeBg.split(' ')[0])
        let enlargeBgH=parseFloat(enlargeBg.split(' ')[1])
    
        let imgW = this.imgObj.clientWidth
        let imgH = this.imgObj.clientWidth

        this.enlargeObj.style.backgroundPosition=`-${left* (enlargeBgW / imgW)}px -${top*(enlargeBgH / imgH)}px`    
        
    }
    smallImgChange(){
        let ulLiObjs=this.el.querySelectorAll('ul li')
        ulLiObjs.forEach((item,i)=>{
            item.onclick=()=>{
                this.el.querySelector('ul li.active').className=''
                item.className='active'
                this.imgObj.style.background=`url(./imgs/${i+1}.jpg) no-repeat`
                // this.enlargeObj.style.background=`url(./imgs/${i+1}.big.jpg) no-repeat -${left* (enlargeW / imgW)}px -${top*(enlargeH / imgH)}px`
                this.enlargeObj.style.backgroundImage=`url(./imgs/${i+1}.big.jpg)`
                
            }
        })
    }

}
